import EchartsComponent from '@/components/EchartsComponent';
import useIntlCustom from '@/hooks/useIntlCustom';
import { Button, DatePicker, Tabs } from 'antd';
import { useState } from 'react';
import styles from './index.css';

const { RangePicker } = DatePicker;

const Overview = () => {
  const { translate } = useIntlCustom();
  const [tab, setTab] = useState('performance');
  const [salesTab, setSalesTab] = useState('allChannels');

  const performanceTrendOptions = {
    title: {
      text: translate('workBench', 'performanceTrend'),
      textStyle: {
        fontSize: 16,
        fontWeight: 600,
        color: '#1a1a1a',
      },
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: 'transparent',
    },
    xAxis: {
      data: [
        translate('workBench', 'oct'),
        translate('workBench', 'nov'),
        translate('workBench', 'dec'),
        translate('workBench', 'jan'),
        translate('workBench', 'feb'),
        translate('workBench', 'mar'),
        translate('workBench', 'apr'),
        translate('workBench', 'may'),
        translate('workBench', 'jun'),
        translate('workBench', 'jul'),
        translate('workBench', 'aug'),
        translate('workBench', 'sep'),
      ],
      axisLine: { lineStyle: { color: '#e8e8e8' } },
      axisLabel: { color: '#8c8c8c' },
    },
    yAxis: {
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } },
      axisLabel: { color: '#8c8c8c' },
    },
    series: [
      {
        type: 'bar',
        data: [200, 750, 1000, 500, 400, 450, 300, 800, 600, 700, 400, 350],
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#667eea' },
              { offset: 1, color: '#764ba2' },
            ],
          },
          borderRadius: [8, 8, 0, 0],
        },
      },
    ],
    grid: { left: 50, right: 20, top: 50, bottom: 40 },
  };

  const realTimeLineOptions = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: 'transparent',
    },
    legend: {
      data: [translate('workBench', 'blue'), translate('workBench', 'green')],
      bottom: 8,
      itemWidth: 14,
      itemHeight: 8,
      itemGap: 20,
      textStyle: {
        fontSize: 12,
      },
    },
    xAxis: {
      type: 'category',
      data: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00'],
      axisLine: { lineStyle: { color: '#e8e8e8' } },
      axisLabel: { color: '#8c8c8c' },
    },
    yAxis: {
      type: 'value',
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } },
      axisLabel: { color: '#8c8c8c' },
    },
    series: [
      {
        name: translate('workBench', 'blue'),
        type: 'line',
        data: [1000, 3000, 2800, 1500, 2000, 4000, 3100],
        smooth: true,
        lineStyle: { width: 3, color: '#667eea' },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(102, 126, 234, 0.3)' },
              { offset: 1, color: 'rgba(102, 126, 234, 0.05)' },
            ],
          },
        },
        symbol: 'circle',
        symbolSize: 6,
      },
      {
        name: translate('workBench', 'green'),
        type: 'line',
        data: [1200, 2000, 3100, 1800, 1500, 3500, 2500],
        smooth: true,
        lineStyle: { width: 3, color: '#f093fb' },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(240, 147, 251, 0.3)' },
              { offset: 1, color: 'rgba(240, 147, 251, 0.05)' },
            ],
          },
        },
        symbol: 'circle',
        symbolSize: 6,
      },
    ],
    grid: { left: 40, right: 20, top: 20, bottom: 60 },
  };

  const salesPieOptions = {
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: 'transparent',
      formatter: '{b}: {c} ({d}%)',
    },
    series: [
      {
        name: translate('workBench', 'salesAmount'),
        type: 'pie',
        radius: ['55%', '75%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        label: { show: false },
        emphasis: {
          scale: true,
          scaleSize: 10,
        },
        labelLine: { show: false },
        data: [
          { value: 4544, name: translate('workBench', 'homeAppliance'), itemStyle: { color: '#667eea' } },
          { value: 4544, name: translate('workBench', 'foodDrink'), itemStyle: { color: '#764ba2' } },
          { value: 4544, name: translate('workBench', 'personalCare'), itemStyle: { color: '#f093fb' } },
          { value: 4544, name: translate('workBench', 'clothingBags'), itemStyle: { color: '#4facfe' } },
          { value: 4544, name: translate('workBench', 'maternalInfant'), itemStyle: { color: '#43e97b' } },
          { value: 4544, name: translate('workBench', 'other'), itemStyle: { color: '#fa709a' } },
        ],
      },
    ],
  };

  const salesPieLegend = [
    {
      color: '#667eea',
      name: translate('workBench', 'homeAppliance'),
      percent: '36%',
      value: `${translate('workBench', 'currencySymbol')}4,544`,
    },
    {
      color: '#764ba2',
      name: translate('workBench', 'foodDrink'),
      percent: '20%',
      value: `${translate('workBench', 'currencySymbol')}4,544`,
    },
    {
      color: '#f093fb',
      name: translate('workBench', 'personalCare'),
      percent: '16%',
      value: `${translate('workBench', 'currencySymbol')}4,544`,
    },
    {
      color: '#4facfe',
      name: translate('workBench', 'clothingBags'),
      percent: '10%',
      value: `${translate('workBench', 'currencySymbol')}4,544`,
    },
    {
      color: '#43e97b',
      name: translate('workBench', 'maternalInfant'),
      percent: '9%',
      value: `${translate('workBench', 'currencySymbol')}4,544`,
    },
    {
      color: '#fa709a',
      name: translate('workBench', 'other'),
      percent: '9%',
      value: `${translate('workBench', 'currencySymbol')}4,544`,
    },
  ];

  const performanceRank = [
    { name: '张力', value: '456,789' },
    { name: '王杰', value: '423,156' },
    { name: '刘斌', value: '398,234' },
    { name: '王芳', value: '365,678' },
    { name: '黄致', value: '342,890' },
    { name: '刘力', value: '318,456' },
    { name: '张镇麟', value: '295,123' },
    { name: '李小明', value: '278,901' },
    { name: '陈小红', value: '256,789' },
    { name: '赵大伟', value: '234,567' },
  ];

  // 业绩Tab的数据
  const performanceData = {
    title: translate('workBench', 'positionCollection'),
    value: '210s',
    chartData: [58, 28, 45, 60, 55, 40, 20],
    categories: [
      translate('workBench', 'moreThan150s'),
      translate('workBench', 'between90And150s'),
      translate('workBench', 'lessThan150s'),
    ],
    metrics: [
      {
        label: translate('workBench', 'todayTotalTrade'),
        value: `124,543,233${translate('workBench', 'yuan')}`,
      },
      { label: translate('workBench', 'salesTargetRate'), value: '92%' },
      {
        label: translate('workBench', 'tradePerSecond'),
        value: `234${translate('workBench', 'yuan')}`,
      },
    ],
  };

  // 回款率Tab的数据
  const collectionData = {
    title: translate('workBench', 'collectionStats'),
    value: '85.6%',
    chartData: [75, 82, 78, 88, 85, 90, 87],
    categories: [
      translate('workBench', 'overdue1to7'),
      translate('workBench', 'overdue8to30'),
      translate('workBench', 'overdue30plus'),
    ],
    metrics: [
      {
        label: translate('workBench', 'totalCollection'),
        value: `2,456,789${translate('workBench', 'yuan')}`,
      },
      { label: translate('workBench', 'collectionRate'), value: '85.6%' },
      {
        label: translate('workBench', 'overdueAmount'),
        value: `412,345${translate('workBench', 'yuan')}`,
      },
    ],
  };

  const currentData = tab === 'performance' ? performanceData : collectionData;

  return (
    <div className={styles.container}>
      {/* 顶部Tab和日期选择 */}
      <div className={styles.topBar}>
        <Tabs
          activeKey={tab}
          onChange={setTab}
          items={[
            {
              key: 'performance',
              label: (
                <span style={{ fontSize: 16, fontWeight: 600 }}>{translate('workBench', 'performanceOverview')}</span>
              ),
            },
            {
              key: 'collectionRate',
              label: (
                <span style={{ fontSize: 16, fontWeight: 600 }}>{translate('workBench', 'collectionAnalysis')}</span>
              ),
            },
          ]}
          style={{
            flex: 1,
            fontSize: 16,
          }}
        />
        <div className={styles.dateButtons}>
          <Button type="link">{translate('workBench', 'today')}</Button>
          <Button type="link">{translate('workBench', 'thisWeek')}</Button>
          <Button type="link">{translate('workBench', 'thisMonth')}</Button>
          <Button type="primary">{translate('workBench', 'allYear')}</Button>
          <RangePicker style={{ width: 200 }} allowClear={false} />
        </div>
      </div>
      {/* 主要内容区域 */}
      <div className={styles.gridRow2}>
        {/* 主要数据展示 */}
        <div className={styles.card}>
          <div className={styles.cardTitle}>{currentData.title}</div>
          <div style={{ display: 'flex', alignItems: 'center', marginBottom: 16 }}>
            <div className={styles.metricValue}>{currentData.value}</div>
            <div style={{ marginLeft: 32, display: 'flex', gap: 8, alignItems: 'center' }}>
              <Button type="link" size="small">
                {translate('workBench', 'today')}
              </Button>
              <Button type="link" size="small">
                {translate('workBench', 'thisWeek')}
              </Button>
              <Button type="link" size="small">
                {translate('workBench', 'thisMonth')}
              </Button>
              <Button type="primary" size="small">
                {translate('workBench', 'allYear')}
              </Button>
              <RangePicker style={{ width: 220, marginLeft: 8 }} allowClear={false} size="small" />
            </div>
          </div>
          <EchartsComponent
            options={{
              tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                borderColor: 'transparent',
              },
              legend: {
                data: currentData.categories,
                bottom: 8,
                itemWidth: 14,
                itemHeight: 8,
                itemGap: 20,
                textStyle: {
                  fontSize: 12,
                },
              },
              grid: { left: 45, right: 20, top: 20, bottom: 60 },
              xAxis: {
                type: 'category',
                data: [
                  translate('workBench', 'jan'),
                  translate('workBench', 'feb'),
                  translate('workBench', 'mar'),
                  translate('workBench', 'apr'),
                  translate('workBench', 'may'),
                  translate('workBench', 'jun'),
                  translate('workBench', 'jul'),
                ],
                axisLine: { lineStyle: { color: '#e8e8e8' } },
                axisLabel: { color: '#8c8c8c' },
              },
              yAxis: {
                type: 'value',
                axisLine: { show: false },
                axisTick: { show: false },
                splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } },
                axisLabel: { color: '#8c8c8c' },
              },
              series: currentData.categories.map((category, index) => ({
                name: category,
                type: 'bar',
                data: currentData.chartData.map((val) => val + index * 10 - 20), // 生成不同的数据系列
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      { offset: 0, color: ['#667eea', '#f093fb', '#4facfe'][index] },
                      { offset: 1, color: ['#764ba2', '#f5576c', '#00f2fe'][index] },
                    ],
                  },
                  borderRadius: [4, 4, 0, 0],
                },
              })),
            }}
            layoutStyle={{ width: '100%', height: 180 }}
          />
        </div>
        {/* 指数 */}
        <div className={styles.card}>
          <div className={styles.cardTitle}>{translate('workBench', 'index')}</div>
          <EchartsComponent
            options={{
              tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                borderColor: 'transparent',
              },
              grid: { left: 20, right: 20, top: 40, bottom: 20 },
              radar: {
                indicator: [
                  { name: translate('workBench', 'reference'), max: 10 },
                  { name: translate('workBench', 'output'), max: 10 },
                  { name: translate('workBench', 'contribution'), max: 10 },
                  { name: translate('workBench', 'popularity'), max: 10 },
                  { name: translate('workBench', 'reputation'), max: 10 },
                ],
                radius: 60,
                center: ['50%', '55%'],
                splitNumber: 5,
                shape: 'polygon',
                axisName: { color: '#595959', fontSize: 12, fontWeight: 500 },
                splitLine: { lineStyle: { color: '#e0e6f1' } },
                splitArea: { areaStyle: { color: ['#fafafa', '#fff'] } },
                axisLine: { lineStyle: { color: '#d9d9d9' } },
              },
              series: [
                {
                  name: translate('workBench', 'index'),
                  type: 'radar',
                  data: [
                    {
                      value: [6, 5, 7, 6, 6],
                      name: translate('workBench', 'personal'),
                      lineStyle: { color: '#667eea', width: 2 },
                      areaStyle: { color: 'rgba(102, 126, 234, 0.2)' },
                      symbol: 'circle',
                      symbolSize: 6,
                      itemStyle: { color: '#667eea' },
                    },
                    {
                      value: [5, 6, 6, 5, 7],
                      name: translate('workBench', 'team'),
                      lineStyle: { color: '#f093fb', width: 2 },
                      areaStyle: { color: 'rgba(240, 147, 251, 0.2)' },
                      symbol: 'circle',
                      symbolSize: 6,
                      itemStyle: { color: '#f093fb' },
                    },
                    {
                      value: [7, 6, 5, 7, 5],
                      name: translate('workBench', 'department'),
                      lineStyle: { color: '#43e97b', width: 2 },
                      areaStyle: { color: 'rgba(67, 233, 123, 0.2)' },
                      symbol: 'circle',
                      symbolSize: 6,
                      itemStyle: { color: '#43e97b' },
                    },
                  ],
                },
              ],
            }}
            layoutStyle={{ width: '100%', height: 200 }}
          />
          <div className={styles.radarLegend}>
            <div className={styles.radarLegendItem}>
              <span className={styles.radarLegendDot} style={{ background: '#667eea' }} />
              <span className={styles.radarLegendLabel}>{translate('workBench', 'personal')}</span>
              <span className={styles.radarLegendValue}>33</span>
            </div>
            <div className={styles.radarLegendItem}>
              <span className={styles.radarLegendDot} style={{ background: '#f093fb' }} />
              <span className={styles.radarLegendLabel}>{translate('workBench', 'team')}</span>
              <span className={styles.radarLegendValue}>28</span>
            </div>
            <div className={styles.radarLegendItem}>
              <span className={styles.radarLegendDot} style={{ background: '#43e97b' }} />
              <span className={styles.radarLegendLabel}>{translate('workBench', 'department')}</span>
              <span className={styles.radarLegendValue}>33</span>
            </div>
          </div>
        </div>
      </div>
      {/* 业绩趋势+业绩排名 */}
      <div className={styles.gridRow2}>
        <div className={styles.card}>
          <EchartsComponent options={performanceTrendOptions} layoutStyle={{ width: '100%', height: 200 }} />
        </div>
        <div className={styles.card} style={{ height: 'fit-content', minHeight: 'auto' }}>
          <div className={styles.cardTitle}>{translate('workBench', 'performanceRanking')}</div>
          <div className={styles.rankingList}>
            {performanceRank.map((item, idx) => (
              <div key={item.name} className={styles.rankingItem}>
                <span className={`${styles.rankNumber} ${idx < 3 ? styles.top : styles.normal}`}>{idx + 1}</span>
                <span className={styles.rankName}>{item.name}</span>
                <span className={styles.rankValue}>{item.value}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
      {/* 活动实时交易+销售额分类占比 */}
      <div className={styles.gridRow2}>
        <div className={styles.card}>
          <div className={styles.cardTitle}>
            {tab === 'performance'
              ? translate('workBench', 'realTimeTransaction')
              : translate('workBench', 'realTimeMonitor')}
          </div>
          <div className={styles.metricsGroup}>
            {currentData.metrics.map((metric, index) => (
              <div key={index} className={styles.metricItem}>
                <div className={styles.metricItemValue}>{metric.value}</div>
                <div className={styles.metricItemLabel}>{metric.label}</div>
              </div>
            ))}
          </div>
          <EchartsComponent options={realTimeLineOptions} layoutStyle={{ width: '100%', height: 160 }} />
        </div>
        <div className={styles.card}>
          <div className={styles.cardTitle}>
            {tab === 'performance'
              ? translate('workBench', 'salesCategoryRatio')
              : translate('workBench', 'collectionChannel')}
          </div>
          <div className={styles.buttonGroup}>
            <Button
              type={salesTab === 'allChannels' ? 'primary' : 'default'}
              size="small"
              onClick={() => setSalesTab('allChannels')}
            >
              {translate('workBench', 'allChannels')}
            </Button>
            <Button
              type={salesTab === 'online' ? 'primary' : 'default'}
              size="small"
              onClick={() => setSalesTab('online')}
            >
              {tab === 'performance' ? translate('workBench', 'online') : translate('workBench', 'onlineCollection')}
            </Button>
            <Button
              type={salesTab === 'bookstore' ? 'primary' : 'default'}
              size="small"
              onClick={() => setSalesTab('bookstore')}
            >
              {tab === 'performance'
                ? translate('workBench', 'bookstore')
                : translate('workBench', 'offlineCollection')}
            </Button>
          </div>
          <div style={{ marginBottom: 12 }}>
            <EchartsComponent options={salesPieOptions} layoutStyle={{ width: '100%', height: 140 }} />
          </div>
          <div>
            {salesPieLegend.map((item) => (
              <div key={item.name} className={styles.legendItem}>
                <span className={styles.legendDot} style={{ background: item.color }} />
                <span className={styles.legendName}>{item.name}</span>
                <span className={styles.legendPercent}>{item.percent}</span>
                <span className={styles.legendValue}>{item.value}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
      {/* 数据标题区块 */}
      <div className={styles.gridRow3}>
        {/* 柱状图 */}
        <div className={styles.card}>
          <div className={styles.cardTitle}>
            {tab === 'performance'
              ? translate('workBench', 'projectStats')
              : translate('workBench', 'collectionProjectStats')}
          </div>
          <EchartsComponent
            options={{
              tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                borderColor: 'transparent',
              },
              legend: {
                data: [
                  translate('workBench', 'project1'),
                  translate('workBench', 'project2'),
                  translate('workBench', 'project3'),
                ],
                bottom: 8,
                itemWidth: 14,
                itemHeight: 8,
                itemGap: 20,
                textStyle: {
                  fontSize: 12,
                },
              },
              grid: { left: 50, right: 20, top: 20, bottom: 60 },
              xAxis: {
                type: 'category',
                data: ['2012', '2013', '2014', '2015', '2016'],
                axisLine: { lineStyle: { color: '#e8e8e8' } },
                axisLabel: { color: '#8c8c8c' },
              },
              yAxis: {
                type: 'value',
                axisLine: { show: false },
                axisTick: { show: false },
                splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } },
                axisLabel: { color: '#8c8c8c' },
              },
              series: [
                {
                  name: translate('workBench', 'project1'),
                  type: 'bar',
                  stack: '总量',
                  data: [32000, 33200, 30100, 33400, 39000],
                  itemStyle: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        { offset: 0, color: '#667eea' },
                        { offset: 1, color: '#764ba2' },
                      ],
                    },
                  },
                },
                {
                  name: translate('workBench', 'project2'),
                  type: 'bar',
                  stack: '总量',
                  data: [12000, 13200, 10100, 13400, 9000],
                  itemStyle: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        { offset: 0, color: '#f093fb' },
                        { offset: 1, color: '#f5576c' },
                      ],
                    },
                  },
                },
                {
                  name: translate('workBench', 'project3'),
                  type: 'bar',
                  stack: '总量',
                  data: [22000, 18200, 19100, 23400, 29000],
                  itemStyle: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        { offset: 0, color: '#4facfe' },
                        { offset: 1, color: '#00f2fe' },
                      ],
                    },
                  },
                },
              ],
            }}
            layoutStyle={{ width: '100%', height: 180 }}
          />
        </div>
        {/* 气泡图 */}
        <div className={styles.card}>
          <div className={styles.cardTitle}>
            {tab === 'performance'
              ? translate('workBench', 'orderAnalysis')
              : translate('workBench', 'collectionOrderAnalysis')}
          </div>
          <EchartsComponent
            options={{
              tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                borderColor: 'transparent',
                formatter: function (params: any) {
                  return `${params.seriesName}<br/>${params.name}: ${params.value[2]}`;
                },
              },
              legend: {
                data: [translate('workBench', 'paidOrders')],
                bottom: 8,
                itemWidth: 14,
                itemHeight: 8,
                itemGap: 20,
                textStyle: {
                  fontSize: 12,
                },
              },
              grid: { left: 40, right: 20, top: 20, bottom: 60 },
              xAxis: {
                type: 'category',
                data: ['2012', '2013', '2014', '2015', '2016'],
                axisLine: { lineStyle: { color: '#e8e8e8' } },
                axisLabel: { color: '#8c8c8c' },
              },
              yAxis: {
                type: 'value',
                axisLine: { show: false },
                axisTick: { show: false },
                splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } },
                axisLabel: { color: '#8c8c8c' },
              },
              series: [
                {
                  name: translate('workBench', 'paidOrders'),
                  type: 'scatter',
                  symbolSize: function (data: any) {
                    return Math.sqrt(data[2]) / 2;
                  },
                  data: [
                    { value: ['2012', 10, 1000], name: '2012' },
                    { value: ['2013', 20, 4000], name: '2013' },
                    { value: ['2014', 30, 9000], name: '2014' },
                    { value: ['2015', 25, 16000], name: '2015' },
                    { value: ['2016', 35, 25000], name: '2016' },
                  ],
                  itemStyle: {
                    color: {
                      type: 'radial',
                      x: 0.5,
                      y: 0.5,
                      r: 0.5,
                      colorStops: [
                        { offset: 0, color: '#667eea' },
                        { offset: 1, color: '#764ba2' },
                      ],
                    },
                    opacity: 0.8,
                  },
                  emphasis: {
                    scale: true,
                    itemStyle: { borderColor: '#667eea', borderWidth: 2 },
                  },
                },
              ],
            }}
            layoutStyle={{ width: '100%', height: 180 }}
          />
        </div>
        {/* 散点图 */}
        <div className={styles.card}>
          <div className={styles.cardTitle}>
            {tab === 'performance'
              ? translate('workBench', 'customerDistribution')
              : translate('workBench', 'collectionCustomer')}
          </div>
          <EchartsComponent
            options={{
              tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                borderColor: 'transparent',
                formatter: function (params: any) {
                  return `${translate('workBench', 'carSales')}<br/>${translate('workBench', 'age')}: ${
                    params.value[0]
                  }<br/>${translate('workBench', 'price')}: ${params.value[1]}`;
                },
              },
              legend: {
                data: [translate('workBench', 'carSales')],
                bottom: 8,
                itemWidth: 14,
                itemHeight: 8,
                itemGap: 20,
                textStyle: {
                  fontSize: 12,
                },
              },
              grid: { left: 50, right: 20, top: 20, bottom: 60 },
              xAxis: {
                type: 'category',
                data: [
                  translate('workBench', 'age19to30'),
                  translate('workBench', 'age30to40'),
                  translate('workBench', 'age41to60'),
                  translate('workBench', 'age60plus'),
                ],
                name: translate('workBench', 'age'),
                axisLine: { lineStyle: { color: '#e8e8e8' } },
                axisLabel: { color: '#8c8c8c' },
              },
              yAxis: {
                type: 'value',
                name: translate('workBench', 'price'),
                axisLine: { show: false },
                axisTick: { show: false },
                splitLine: { lineStyle: { color: '#f0f0f0', type: 'dashed' } },
                axisLabel: { color: '#8c8c8c' },
              },
              series: [
                {
                  name: translate('workBench', 'carSales'),
                  type: 'scatter',
                  data: [
                    [translate('workBench', 'age19to30'), 200000],
                    [translate('workBench', 'age19to30'), 220000],
                    [translate('workBench', 'age19to30'), 250000],
                    [translate('workBench', 'age30to40'), 210000],
                    [translate('workBench', 'age30to40'), 230000],
                    [translate('workBench', 'age30to40'), 260000],
                    [translate('workBench', 'age41to60'), 220000],
                    [translate('workBench', 'age41to60'), 240000],
                    [translate('workBench', 'age41to60'), 270000],
                    [translate('workBench', 'age60plus'), 210000],
                    [translate('workBench', 'age60plus'), 230000],
                    [translate('workBench', 'age60plus'), 260000],
                    [translate('workBench', 'age60plus'), 300000],
                  ],
                  itemStyle: {
                    color: '#43e97b',
                    opacity: 0.7,
                  },
                  symbolSize: 10,
                  emphasis: {
                    scale: true,
                    itemStyle: {
                      color: '#43e97b',
                      borderColor: '#38d16a',
                      borderWidth: 2,
                    },
                  },
                },
              ],
            }}
            layoutStyle={{ width: '100%', height: 180 }}
          />
        </div>
      </div>
    </div>
  );
};

export default Overview;
